Complete newbie CSS question about dropdown submenus
I'm trying to create a page with a navigation bar that has dropdown submenus. Unfortunately, something keeps going wrong: hovering over an option makes the submenu show up over the bar and list the submenu options horizontally.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Toy CSS</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<style>
/* -------------------------MAIN-MENU----------------------- */
#topmenu ul {
margin-left: 0; /* clears default margins */
padding-left: 0; /* clears default padding */
background-color: #036;
color: white;
float: left;
width: 100%; /* creates complete bar */
font-family: arial, helvetica, sans-serif;
}
#topmenu li {
display: inline;
}
/* ----------------------MAIN-MENU-LINKS-------------------- */
#topmenu a {
padding: 3px 10px;
}
#topmenu a:link, #topmenu a:visited {
padding: 0.2em 1em;
background-color: #036;
color: white;
float: left;
border-right: 1px solid #fff;
text-decoration: none; /* removes link underlining */
}
#topmenu a:hover {
color: #fff;
background-color: #369;
}
/* --------------------------SUBMENU------------------------ */
#topmenu li ul {
display: none;
background-color: #69f;
}
#topmenu li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#topmenu li:hover li {
float: none;
}
#topmenu li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000;
}
#topmenu li li a:hover {
background-color: #8db3ff;
}
/* -------------------------------------------------------------------------------- */
.mainbox {
border: 2px solid black;
float: left;
margin: 10px 0px 0px 0px;
min-height: 500px;
padding: 20px;
width: 600px;
}
.mainbox ul li {
width: 500px;
}
.mainbox {
displ开发者_如何学Cay: none;
}
</style>
</head>
<script>
$(function() {
$('#topmenu li a').click(function(e) {
e.preventDefault();
var tabContent = this.hash;
$(tabContent).show().siblings('.mainbox').hide()
});
});
</script>
<body>
<!-----------–-–-–-–--------TOP-MENU-------------------------->
<div id="topmenu">
<ul>
<li>
<a href="#optiona">Option A</a>
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
<li>A4</li>
<li>A5</li>
</ul>
</li>
<li>
<a href="#optionb">Option B</a>
<ul>
<li>B1</li>
<li>B2</li>
<li>B3</li>
<li>B4</li>
</ul>
</li>
<li>
<a href="#optionc">Option C</a>
</li>
</ul>
</div>
<!-----------–-–-–-–---------OPTIONS-------------------------->
<div id="optiona" class="mainbox">
<h2>Option A</h2>
<p>You've selected Option A. Here is a list.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="optionb" class="mainbox">
<h2>Option B</h2>
<p>You've selected Option B. Here is a list.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="optionc" class="mainbox">
<h2>Option C</h2>
<p>You've selected Option C. Here is a list.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
Thanks so much for your help!
#topmenu ul li {
display: list-item;;
}
#topmenu ul li ul {
margin-top:25px !important;
}
Should do the trick...
See it in action
that root of the problem is that
#topmenu li {
display: inline;
}
is cascading, so that the submenu <li/>s are also inline. you should correct it with something like
#topmenu li li {
display: block;
}
and go from there :)
加载中,请稍侯......
精彩评论