Vote count:
0
I'm doing some practice with layout using css, and I've come across a weird thing that I don't know how to explain. Where does the space highlighted in red in the following image come from, and how do I eliminate it?
![screenshot of css issue])(http://ift.tt/1F0MgbL)
HTML:
<body>
<div class="menu-bar">
<ul>
<li>
<a href="#home">Home</a>
<ul>
<li><a href="#beachouse">Beach House</a></li>
<li><a href="#skicabin">Ski Cabin</a></li>
<li><a href="#countrycottage">Country Cottage</a></li>
</ul>
</li>
<li>
<a href="#news">News</a>
<ul>
<li><a href="#worldnews">World News</a></li>
<li><a href="#nationalnews">National News</a></li>
<li><a href="#localnews">Local News</a></li>
</ul>
</li>
<li>
<a href="#contact">Contact</a>
<ul>
<li><a href="#emailaddress">Email Address</a></li>
<li><a href="#phonenumber">Phone Number</a></li>
<li><a href="#postaladdress">Postal Address</a></li>
</ul>
</li>
<li>
<a href="#about">About</a>
<ul>
<li><a href="#aboutme">About Me</a></li>
<li><a href="#aboutyou">About You</a></li>
<li><a href="#aboutus">About Us</a></li>
</ul>
</li>
</ul>
</div>
</body>
CSS:
body {background: #77c4d3; padding:1%; }
div.menu-bar{position: relative; max-width: 700px;}
/*Styles for both menu and submenus: */
div.menu-bar ul { list-style-type: none; margin: 0; padding:20px; background: gray;}
div.menu-bar li { background:white; text-align:center; display:inline-block; padding:10px;}
/*Menu-specific styles: */
div.menu-bar > ul {width: 100%;}
div.menu-bar > ul > li {width:20%; border:0; margin: 0; padding-top: 10px; padding-bottom: 10px;}
/* Submenu-specific styles */
div.menu-bar ul ul {background-color: blue; padding-left: 10px; padding-right: 10px;}
/*Hide any unodered lists that are descendents of a list element by default*/
div.menu-bar li ul {
display: none;
}
/*Select any unordered lists that are children of list elements that are being hovered on.*/
/* The <ul> is display:block, but the individual <li> elements are inline-block, which is what matters.*/
div.menu-bar li:hover > ul {
display: block;
position: absolute;
}
asked 32 secs ago
navigation bar even spacing
Aucun commentaire:
Enregistrer un commentaire