I would like to change my current menu to allow for one dropdown: Products. My test page can be found here This is my HTML:
<nav>
<ul class="menu">
<li class="current">Home</li>
<li>About Us</li>
<li class="subNav"><a class="selected">Products</a>
<ul>
<li>Designer Bags
</li>
<li>Cowhides
</li>
<li>Hand-carved Geese
</li>
<li>Antler Chandeliers
</li>
</ul>
<li>Gallery</li>
<li>Shows</li>
<li>Contact</li>
<li>Shop</li>
</ul>
</nav>
My original CSS:
.nav-buttons{text-align:center;padding-bottom:17px;}
#nav{overflow:hidden;display:inline-block}
#nav li{float:left;overflow:hidden;margin:0 10px}
#nav li a{display:block;background:url(../images/pags.png) no-repeat 0 0;
width:19px;height:19px;
line-height:0;font-size:0;
}
#nav li a:hover,#nav li.showPage a{background-position: 0 bottom}
nav{float:right;padding:12px 0 0 0}
.menu {
font-size:0;
line-height:0;
padding:0;
z-index:99;
position:relative;
margin-right:21px;
}
.menu > li {
position:relative;
float:left;
margin-left:11px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:url(../images/point.png)
}
.menu li a{
color:#b3adad;
font-size:18px;
line-height:20px;
display:block;
position:relative;
text-decoration:none !important;
padding:7px 12px 9px;
font-family: 'Noto Sans', sans-serif;
}
.menu li.current,
.menu li:hover {
background:#9c6f51;
}
.menu li.current a,
.menu li:hover a{
color:#fff
}
And this bit of CSS I just added today:
nav a {
font-weight: 800;
padding: 5px 10px;
display: block;
}
nav > ul > li.subNav ul {
display: none;
position: absolute;
top: 100%;
left: 0;
white-space: nowrap;
background: #fff;
}
nav ul li.subNav:hover ul {
display: block;
}
It seems to want to work with the exception that I see no sub-menu unless I hover over it. I've come here for help because I'm afraid to mess with the original CSS and thus ruin my navigation throughout the rest of the site. Is there something I can add that will cause the menu to appear within just the "subNav" class, without affecting the rest of the menu or site navigation? (The original CSS came with this template and I do note that font-size:0 is used a few times. Since the menu worked well before I felt I needed to add a dropdown, I have been reluctant to change that, since I would only be experimenting without understanding.)
I've sorted it. I had to change the background color in the "subNav" class, in order for the site menu's overall font color to show up. It's there; I just couldn't see it.
Related
I am having trouble with a pop-out menu behaving different in Chrome than in IE or Firefox.
Here is the HTML
<body>
<ul>
<li>Level One
<ul>
<li>Level Two Item One</li>
<li>Level Two Item Two
<ul>
<li>Level Three</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
Here is the css
ul {
padding: 0px;
list-style-type: none;
}
li {
background-color: blue;
}
a:link {
text-decoration:none;
color: #0000ff;
margin: 5px 0px 5px 0px;
background-color: cyan;
display: inline-block;
width: 200px;
}
li {
position: relative;
}
li > ul {
display: none;
}
li:hover > ul, li.sfhover > ul {
left 100%;
top 0;
position: absolute;
display: inline-block;
}
li:hover > ul li, li.sfhover > ul li {
background-color: #33ff33;
width: 200px;
position: relative;
}
In Firefox and IE Level Three pops out to the right of Level Two Item Two. In Chrome Level Three pops out below Level Two Item Two.
I know it has something to do with making the link a block element, but I want the link to display as an inline-block. Also, I cannot change the HTML. It is coming from a CMS (I have simplified it to illustrate the problem)
Any suggestions would be appreciated.
You've got a couple of colons missing from your CSS, specifically this rule: li:hover > ul, li.sfhover > ul
left 100%; should beleft:100%; and top 0; should be top:0;
I'm a relative newbie and I'm having trouble following the css for my nav. I need to do 2 things:
1) run my sub menu inline
2) hide my sub-sub nav, and show it inline as well.
Here is the test site: http://gbetza.mydomain.com/webservice2/test/Basso56/test/home.html
Here is the CSS: http://gbetza.mydomain.com/webservice2/test/Basso56/test/css/style%20-%20Copy.css
I'm having trouble understanding which class I need to adjust as well as how.
Thank you
Copy + Paste from a similar answer of mine.
I have created a really simple implementation of this. It is barebones so that you can get a real easy look at the basic concept.
In the fiddle here: http://jsfiddle.net/WS3QQ/2/
HTML - Note how the sub-menus are nested
<div id="nav">
<ul>
<li>Top Menu
<ul>
<li>Sub-Menu</li>
<li>Sub-Menu</li>
<li>Sub-Menu</li>
</ul>
</li>
<li>Top Menu</li>
<li>Top Menu</li>
<li>Top Menu</li>
</ul>
</div>
CSS - note how you can easily target the sub-menus (#nav li li). By default the sub-menu li is hidden (display:none). When the li is hovered over, the sub menu li is shown (display:block).
#nav ul { list-style-type: none; margin: 0; padding: 0; }
#nav li { float: left; }
#nav li li { clear: left; display: none; }
#nav li:hover li { display: block; }
#nav li:hover a { background: #111; }
#nav li a { background: #333; padding: 10px; display: block; color: #FFF; font-weight: bold; text-decoration: none; }
#nav li a:hover { background: #3914AF; }
I tried solving this using some tips from this site but it doesn't seem to work for me. I have a website http://apartmanimikzaton.com/paintball/index.php, and I want to create a drop down menu like from the navigation.
EDIT: I didn't add it right now, but the thing I want to get is drop down menu text on hover.
This is my navigaton:
<ul class="navigation">
<li id="navigation-1"> O nama </li>
<li id="navigation-2"> Oprema </li>
<li id="navigation-3"> Tereni
<ul>
<li> Lokacija 1 </li>
<li> Lokacija 2 </li>
</ul>
</li>
<li id="navigation-4"> Galerija </li>
<li id="navigation-5"> Cjenik </li>
<li id="navigation-6"> O Paintballu </li>
<li id="navigation-7"> Teamovi </li>
<li id="navigation-8"> Webshop </li>
</ul>
And this is my css:
.navigation {background: url(images/layout/navigation.jpg) no-repeat; width: 980px; height: 57px; margin: 0 0 10px 0; padding: 0;}
.navigation li, .navigation a {height: 57px; display: block;}
.navigation li {float: left; text-indent: -9999em; position: relative;}
.navigation ul ul{
position:absolute;
left: 0;
top: 100px; /* height of the parent list item */
display:none; /* hide it */
}
.navigation li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
I'm doing something wrong so any tips would be appreciated.
I took the time to analyze your code, and here's what I can help you with for now.
First of all, insert these styles into your CSS:
ul.navigation li ul{
background: none repeat scroll 0 0 #000000;
display:none;
padding: 0;
position: absolute;
top: 57px;
width: 117px;
z-index: 6;
}
On the following styles:
.navigation li {
float: left;
position: relative;
text-indent: -9999em;
width: 100%;
}
The text-indent: -9999em; is affecting the text of the drop down menu you want to insert. I suggest you remove it. If you don't wish to display the text over your menu icons, you can simply do it like this on your link:
I don't think this approach will work:
.navigation li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
Try this instead and see if it works:
.navigation li:hover ul{
display:block;
}
That should at least help you a bit, can't really tell if that's what you are intending to do. Give a response if you manage to accomplish what you wanted.
Cheers,
Artur Balestro
Remove this:
.navigation li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
And Add this
.navigation li:hover ul{ /* show it when mouse is over the parent list item */
display:block;
}
There are some unnecessary styles in there that need cleaning up, but if you're wanting a quick fix:
.navigation > li:hover > ul,
.navigation > li:hover > ul > li,
.navigation > li:hover > ul > li > a {
text-indent: 0;
display: block;
z-index: 999;
background: #fff;
}
One of my UL is not displaying correctly. It is both displaying things inline and also the bullets do not show.
I know that this issue is isolated strictly to my divs that are used with my tabbed interface. I'm also assuming this is due to the hierarchy above. (The .tabs li says to display things 'inline'.) If I delete that, obviously the tab interface is screwed. How can I keep my divs displaying horizontally, and have the lists inside of the div box display in a block?
Thanks!
CSS
.basics ul {font-family:terminal;
font-size:9px;
text-transform:uppercase;
color:gray;
padding:0px;
display:block;
}
li.basics { list-style-image: url('/bullet.png');
}
ul b {font-family: terminal;
font-size: 8px;
text-transform:uppercase;
color:#fff3a2;
font-weight:lighter;
}
div.tabs {
padding:15px;
width:760px;
background:#000;
color:#fff;
border-radius: 0em 4em 1em;
-moz-border-radius: 10px;
margin-left:3px;
height:200px;
overflow: auto;
}
ul.tabs {
padding:0;
margin:0;
margin-top:10px;
margin-left:3px;
}
.tabs li {
list-style:none;
display:inline;
}
and the html code:
<ul class='tabs'>
<li><a href='#tab1'>BASICS</a></li>
<li><a href='#tab2'>BIOGRAPHY</a></li>
<li><a href='#tab3'>RANDOM</a></li>
<li><a href='#tab4'>NPCs</a></li>
</ul>
<div id="tab1" class="tabs">
<ul class="basics">
<li><b>Full Name:</b>
<li><b>DOB:</b> 27 May 1985; 28 YRS </li>
<li><b>Birthplace:</b>Olinda, Brasil</li>
<li><b>Nationality:</b>Brazilian, French, & American</li>
</ul>
If I'm understanding your question correctly, you want the top to be horizontal, and the lower one to be vertical. I just changed your rule from .tabs li to ul.tabs li
http://jsfiddle.net/itsmikem/3RwMn/
Let me know if that's your issue.
I Have a <li> menu items with 2px border bottom as underline and a bold hover which makes other elements move while hovering. I tried to change the padding on the hover but without a result. (I think the problem is the added underline of border bottom)
#menu {
list-style: none outside none;
margin-top:40px;
text-align: center}
#menu li {
margin-right: 26px;
display:inline;}
#menu a:hover {
border-bottom:2px solid #ac9962;
font-size:16px;
letter-spacing: -2px;
white-space: nowrap;
font-weight:bold;}
<ul id="menu">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
http://jsfiddle.net/tGcfh/
Try something similar:
HTML
<div id="menu_container">
<ul>
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
</ul>
</div>
CSS
#menu_container {
width: 100%;
display: table;
}
#menu_container ul li {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 50px;
}
#menu_container ul li a {
font-size: 14px;
}
#menu_container ul li a:hover {
font-size: 24px;
}
This will work perfectly as expected, but have in mind that display:table is not supported in IE7 and bellow.
make the font size same in hover time and normal time on hover time font-size:16px is there and normal time font-size:14px is there... and hover time font weight bold is there.
just give the following css for hover. You have gave bold, border bottom and size change, it causes alignment issue. Otherwise you have to give specified width to each link.
#menu2 a:hover {
text-decoration:underline;
}
if change this
#menu a:hover {
border-bottom:2px solid #ac9962;
font-size:16px;
letter-spacing: -2px;
white-space: nowrap;
font-weight:bold;}
delete
font-size:16px;
letter-spacing: -2px;
font-weight:bold;
This may fix your problem