I'm trying to center my css dropdown menu, but I can't seen to get it to work! I've tried adding text-align: center and margin-left: auto; margin-right: auto, but all that gets centered are the dropdown li-items. How is this done?
Here's the css:
.bg {background-color: #008503;}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:30px; background-color: #1e52b8; position:relative; font-family: Helvetica, Verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:30px; line-height:33px; color:#FFF; text-decoration:none; font-size:15px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:30px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background-color: #008503;}
.menu li a.top_link:hover span {background-color: #008503;}
.menu li a.top_link:hover span.down {background-color: #FF0000;}
.menu li:hover > a.top_link {color:#FFF; background-color: #008503;}
.menu li:hover > a.top_link span {background-color: #008503;}
.menu li:hover > a.top_link span.down {background-color: #FF0000;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu :hover ul.sub {left:0; top:30px; right:2px; background: #fff; padding:3px 0; border:1px solid #008503; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#1e52b8; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}
And here's the html:
<div style="width: 980px"> <!-- container -->
<ul class="menu">
<li class="top"><span>Introduction</span></li>
<li class="top"><span>About us</span>
<ul class="sub">
<li>Sample Menu This is some longer text</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
</ul>
</li>
<li class="top"><span>The island</span>
<ul class="sub">
<li>Sample Menu This is some longer text</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
</ul>
</li>
<li class="top"><span>Hotels</span></li>
<li class="top"><span>Tours</span></li>
<li class="top"><span>Reservation</span></li>
<li class="top"><span>Contact us</span></li>
</ul>
</div>
Since you are using float, the only way to center it is to apply a width to the containing element and use margin-left: auto; margin-right: auto. There is no way to do this will retaining the flexible width.
An alternative to float would be display:inline-block; These can be centered using text-align:center, but you'll have to rework the css.
Well, here's one way to do it, you can put a div container around the menu...
#menuContainer{margin: auto;}
<div id='menuContainer' style="width: 980px">
Related
Would like the last submenu of this css drop-down menu to be right-aligned: https://jsfiddle.net/mishka00/p6cyy5p7/. It is currently right-aligned (incorrectly) just to show the desired end result. Tried various combinations of right:0 and left:auto, but couldn't figure it out.
See https://jsfiddle.net/sjmcpherso/b1pyqLpc/
#nav ul li:last-child ul {
right:0px;left:auto;
text-align:right;
background:white;
}
Plus add position:relative to the parent
add position: relative for #nav ul li
add right: 0; for #nav ul li:last-child ul
#nav ul {
padding:0;
margin:0;
list-style:none;
}
#nav ul li {
float:left;
border:1px solid #fff;
margin:0 30px;
position: relative;
}
#nav ul li a {
display:block;
padding:10px 6px;
position:relative;
}
#nav ul li:hover {
border-left:1px solid #E9E9E9;
border-right:1px solid #E9E9E9;
border-top:1px solid #E9E9E9;
}
#nav ul li ul {
display:none;
}
#nav ul li:hover ul {
display:block;
position:absolute;
z-index: 10;
background:#fff;
width:150px;
border:0;
}
#nav ul li ul li {
display:block;
position:relative;
border:none;
float:none;
margin:0;
left:-1px;
}
#nav ul li ul li:hover {
border:none;
background:#F7F9FB;
}
#nav ul li ul li a {
padding:10px;
border:1px solid #E9E9E9;
}
#nav ul li:last-child ul {
right: 0;
background:white;
}
#nav ul li:last-child ul li{
left:1px;
}
<div id="nav">
<ul>
<li>Menu1
<ul>
<li>Item1
</li>
<li>Item2
</li>
<li>Item3
</li>
<li>Item4
</li>
</ul>
</li>
<li>Menu2
<ul>
<li>Item1
</li>
<li>Item2
</li>
<li>Item3
</li>
<li>Item4
</li>
</ul>
</li>
<li>Menu3
<ul>
<li>Item1
</li>
<li>Item2
</li>
<li>Item3
</li>
<li>Item4
</li>
</ul>
</li>
</ul>
</div>
<div style='clear: both;margin-bottom:5px;'></div>
<div style='border-top:1px solid navy;'></div>
just add this code to your css
#nav ul li:last-of-type {
float: right;
}
In my drop-down menu the font colour of "li" is white and while "hover" the colour change to black and i have drop-down menu also .When hover the sub menu of my products link, the font colour products(li) changing to white my hover background is also white, here my question, how can I keep the colour of my "li" as black ??
my stylesheet
#menu{width:auto; margin: 0px 0px 0px 0px; background-color: #000; height:32px; float:right; border-radius:0px 0px 10px 10px ;}
#menu ul{list-style-type:none; margin:0px; padding:0px; margin-left:10px;}
#menu ul li{float: left; position: relative; margin-left:0px; height:29px; padding-top:3px;}
#menu ul li:active {color:#000;}
#menu ul li:hover{background-color: #f5f5f5; margin-left:0px; color:#000}
#menu ul li a{color: #fff; padding: 0 16px; line-height:25px; font-size:13px; font-family:arial; display: block; text-decoration:none; margin-left:0px;}
#menu ul li a:hover{background-color: #f5f5f5; margin-left:0px; color:#000;}
#menu ul li ul li{float: none; position: relative; margin-left:0px;}
#menu ul li ul{position: absolute; top:32px; left:0; display: none; background-color: #000; width:150px; margin-left:0px;}
#menu ul li:hover > ul{display: block; margin-left:0px; color:#000;}
#menu ul li ul li a{white-space: nowrap; line-height:25px; margin-left:0px;}
#menu ul li ul li ul{position: absolute; top:0; left:145px; display: none; background-color: #000; width:150px; margin-left:0px;}
my html code
<div id="menu">
<ul>
<li>Home</li>
<li>Profile</li>
<li>Product
<ul>
<li>Has Submenu</li>
<li>Has Submenu</li>
<li>Has Submenu</li>
<li>Has Submenu</li>
<li>Has Submenu</li>
</ul>
</li>
<li>Other Services</li>
<li>Contact Us</li>
</ul>
</div>
Add the following CSS:
#menu ul li:hover > a {
color: #000;
}
The problem was the anchor tag. No matter what color would you set for the li, the anchor tag has style color: #fff.
i have a problem with CSS white space between words of the menu bar. I tried numerous ways but still cant solve it. Can someone help me here?
The picture of the menu problem can be seen below:
http://imageshack.us/photo/my-images/201/44262065.jpg/
I want the outcome to be like this, lesser space between each menu:
http://i47.tinypic.com/2vvwcnn.jpg
Here is my css:
#cssmenu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
#cssmenu ul{
background:url(img/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
#cssmenu li{
float:left;
padding:0px 0px 0px 132px;
display: inline-block;
}
#cssmenu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 0px;
text-align:left;
text-decoration:none;
}
#cssmenu li a:hover{
color:#000000;
text-decoration:none;
}
#cssmenu li ul{
background:#e0e0e0;
border-left:2px solid #f68618;
border-right:2px solid #f68618;
border-bottom:2px solid #f68618;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:180px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
display:block;
float:none;
padding:0px;
width:180px;
}
#cssmenu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
#cssmenu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
#cssmenu p{
clear:left;
}
#cssmenu .active > a:hover {
color:#ffffff;
}
Here is my html code:
<div id='cssmenu'>
<ul>
<li><a href='index.php'><span>Home</span></a></li>
<li><a href='promotions.php'><span>Promotions</span></a></li>
<li><a href='outlets.php'><span>Outlets</span></a></li>
<li><a href='feedback.php'><span>Feedback</span></a></li>
<li class='has-sub '><a href='#'><span>Career</span></a>
<ul>
<li><a href='stall.php'><span>Stall Leasing</span></a></li>
<li><a href='career.php'><span>Career Opportunity</span></a></li>
</ul>
</li>
<li><a href='contactUs.php'><span>Contact Us</span></a></li>
</ul>
</div>
use this decrease your padding of li and line-height also
#cssmenu li{
float:left;
padding:30px;
display: inline-block;
}
Try removing the padding from .border class, row 311 in you blue round.css file
uMy child pages are showing up in a horizontal line under the parent page link in the navigation. I can't figure out where the css is wrong. You can see what I'm talking about here (the links under Sample Page are the ones in question): http://sitetest3.talktothedogs.com.
HTML for Navigation (which is auto-generated by WP)
<div id="nav">
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-2">Sample Page
<ul class='children'>
<li class="page_item page-item-4">Testing page 2</li>
<li class="page_item page-item-6">Testing page 1</li>
</ul>
</li>
</ul>
</div>
</div>
My CSS Code
.menu, .menu ul { margin:0; padding:0; list-style:none; height:29px; text-align:center; }
.menu a { color:#fff; display:block; padding-left:15px; padding-right:15px; padding-bottom:0px; }
.menu a:hover { color:#000; display:block; text-decoration:none; }
.menu li { float:left; margin:0; padding: 0px; }
.menu li li { float:left; margin: 0 0 0 5px; padding:0; width:130px; }
.menu li ul.submenu li { display:block; position:absolute; left:0; }
.menu li li a, .menu li li a:link, .menu li li a:visited { background:#a82652; width:150px; float:none; margin:0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li li a:hover, .menu-header li li a:active { background:#000; width:150px; float: none; margin: 0; padding: 4px 10px 5px 10px; color:#fff; }
.menu li ul { position:absolute; width:10em; left:-999em; padding-top:13px; z-index:1; }
.menu li:hover ul { left:auto; display:block; }
.menu li:hover ul, #menu li.sfhover ul { left: auto; }
.menu li.current_page_item a { }
.menu li.current_page_item a:hover{ }
Any help would be appreciated. Thanks in advance!
Change your CSS as follows:
.menu li a{ margin-bottom:13px;}
.menu li li { float:none; margin: 0; padding:0; width:130px; }
Here is how this would look
Your first line in the CSS:
.menu, .menu ul { ... }
is setting the height of both the <div class="menu"> AND the <ul> within that .menu to the same height. The entire menu is constrained to a container that's 29px high.
I am trying to create a css horizontal drop down menu that will show the children in a horizontal subnav. What I have so far is: (this is incomplete but I am stuck)
<ul class="menu">
<li class="top">Home</li>
<li class="top">
About
<ul class="sub">
<?php wp_list_pages('title_li=&child_of=2') ?>
</ul>
</li>
<li class="top">
Services
<ul class="sub">
<?php wp_list_pages('title_li=&child_of=5') ?>
</ul>
</li>
<li class="top">
Projects
<ul class="sub">
<?php wp_list_pages('title_li=&child_of=7') ?>
</ul>
</li>
<li class="top">
Team
<ul class="sub">
<?php wp_list_pages('title_li=&child_of=10') ?>
</ul>
</li>
</ul>
and the css:
.menu {padding:50px 0 0; list-style:none; line-height:1; width:400px;}
.menu li.top {display:block; float:left; position:relative; padding:0 17px 0 0;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb;
text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px;
cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0
12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px;
height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right
top;}
.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right
top;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0;
left:0;}
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-
9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu :hover ul.sub {left:2px; top:20px; right:2px; background: #fff; padding:3px 0;
white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left;
width:250px;}
.menu :hover ul.sub li a {float:right;font-weight:normal;display:block; font-size:11px;
color:#000; text-decoration:none;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-
space:nowrap; width:93px; z-index:200; height:auto;}
I really need some help I can not get this to work at all and need to running ASAP!
Rendered HTML:
<ul class="menu">
<li class="top">Home</li>
<li class="top">
About
<ul class="sub">
<li class="page_item page-item-33">Why CVA?</li>
</ul>
</li>
<li class="top">
Services
<ul class="sub">
</ul>
</li>
<li class="top">
Projects
<ul class="sub">
</ul>
</li>
<li class="top">
Team
<ul class="sub">
<li class="page_item page-item-19">Contact Us</li>
</ul>
</li>
</ul>
Instead of fixing this mess, here's a simple example you can use and apply:
HTML
<div class='menu'>
<a href=''>One</a><a href=''>Two</a><a href=''>Three</a>
</div>
<div class='menu'>
<a href=''>One</a><a href=''>Two</a>
</div>
<div class='menu'>
<a href=''>One</a><a href=''>Two</a><a href=''>Three</a><a href=''>Four</a>
</div>
CSS
.menu { float:left; line-height:20px; border:1px solid black; height:20px;
overflow:hidden; margin-right:10px; }
.menu a { display:block }
.menu:hover { height:auto; }
Doesn't look good, but it works. You can style it to look beautiful later. (Don't forget the doctype to enable :hover.)
// Edit
Sorry just noticed the 'horizontal' part. This is a vertical dropper. Will leave it up though just in case it helps you.