I'm trying to make a horizontal menu layout in CSS. I was using the guide listed here:
http://www.devinrolsen.com/pure-css-horizontal-menu/
I've got a css file looking like this, called navigation.css:
.navigation{
width:100%;
height:30px;
background-color:lightgray;
}
.navigation ul {
margin:0px;
padding:0px;
}
.navigation ul li {
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;
}
.navigation li a {
color:black;
text-decoration:none;
}
.navigation li a:hover {
color:black;
text-decoration:underline;
}
.navigation li ul {
margin:0px;
padding:0px;
display:none;
}
.navigation li:hover ul {
display:block;
width:160px;
}
.navigation li li{
list-style:none;
display:block;
}
and in my actual php page, I have this
<div class="navigation">
<ul>
<li>
something
<ul>
<li>Hello</li>
<li>hello2</li>
</ul>
</li>
<li>
Browse database
<ul>
<li>test</li>
<li>Test2</li>
<li>Search</li>
</ul>
</li>
</ul>
</div>
For reasons I cannot determine, their is no drop-down menu effect. Consequently, if I change navigation to an id instead of a class by replacing .navigation with #navigation, then none of the layout affects the HTML.
In case you're still having the problem, have you tried changing:
.navigation li li{
list-style:none;
display:block;
}
To:
.navigation li li{
list-style:none;
display:none;
}
.navigation li:hover li{
display:block;
}
Related
I have created a side drop down menu and everything is positioned however every time I go to move my cursor onto the menu it disappears, I have a feeling this is something to do with the :hover I have used but I cannot seem to get it stop disappearing Can anyone help?
my html is :
<div class="navBar">
<ul>
<li class="navText">L1</li>
<li class="navText dropdownTrigger">L2</li>
<ul class="dropdown">
<li>L6</li>
<li>L7</li>
<li>L8</li>
<li>L9</li>
<li>L10</li>
</ul>
<li class="navText">L3</li>
<li class="navText">L4</li>
<li class="navText">L5</li>
</ul>
</div>
my css is :
* {
padding:0px;
margin:0px;
}
body {
background-color:rgba(17,17,17,1);
background-size:cover;
}
.navBar {
position:fixed;
width:70px;
height:100%;
padding-top:100px;
background-color:rgba(255,255,255,0.5);
text-align:center;
}
.navBar > ul > li,
.navBar > ul > li > a {
margin-top:70px;
text-decoration:none;
display:block;
color:black;
font-family:"Constantia";
font-size:30px;
}
.navBar > ul > ul > li,
.navBar > ul > ul > li > a {
display:block;
list-style-type:none;
text-decoration:none;
color:black;
font-family:"Duan Penh";
font-size:24px;
}
.navBar a:hover,
.navBar li:hover {
background-color:rgba(0,0,0,0.5);
color:white;
font-weight:bold;
}
.navBar > ul > ul {
background-color:rgba(255,255,255,0.5);
width:200px;
height:auto;
margin-left:70px;
margin-top:-35px;
position:absolute;
display:none;
}
.dropdownTrigger:hover ~ .dropdown {
display:block;
}
Try this
.dropdownTrigger:hover ~ .dropdown, .dropdown:hover {
display:block;
}
jsFiddle : https://jsfiddle.net/ojf32faz/
I want to display (blue) sub menu in one line but somehow it is coming in multiple lines. It works fine if I add fixed width but it should be flexible as this menu will by dynamic and could be change as per user's request.
Please check Fiddle
http://jsfiddle.net/awaises/meXB9/
HTML :
<div class="left-bar">
<ul class="menu">
<li>
For Sale
<ul class="sub-menu">
<li>Residential</li>
<li>Commercial</li>
<li>Industrial</li>
<li>Agriculture</li>
<li>Land</li>
</ul>
</li>
<li>Rent To Own</li>
<li>Key Money</li>
<li>For Sale at Auction</li>
</ul>
</div>
CSS :
body{font:normal 12px/24px arial;}
.left-bar{background:#262626; width:150px; text-align:center; text-decoration}
ul.menu, ul.sub-menu, ul.sub-menu2{margin:0; padding:0; list-style:none;}
ul.menu li{ position:relative; }
ul.menu li a{
color:#adadad;
font-weight:bold;
text-decoration:none;
border-bottom:1px solid #171717;
display:block;
}
ul.sub-menu{
position:absolute;
background:#1ea3d7;
top:2px; left:150px;
}
ul.sub-menu li{float:left;}
ul.sub-menu li a{color:#fff;border:none;padding:0 10px;}
Updated Fiddle
make top:0px; in ul.sub-menu
Update:
use display:inline-flex;
Use following.
.sub-menu {
display: table;
}
.sub-menu li {
/* float: left; */
display: table-cell;
}
I am doing a website project on asp.net 3.5. When i Zoom-out the interface on web-browser my menu bar's Contact tab goes below also the places to visit tab's line "visit" comes below. How can I overcome this problem?
HTML
<div id="nav">
<ul>
<li>Home</li>
<li>About us</li>
<li>Reservation
<ul>
<li>Room</li>
<li>Membership</li>
<li>Events</li>
</ul>
</li>
<li>Places to visit</li>
<li>Travel</li>
<li>Packages</li>
<li>Gallery</li>
<li>Contact us</li>
</ul>
</div>
CSS
#nav { clear:both; margin:0;
padding:0;width:900px; height:30px;}
#nav ul { margin:0; padding:0; line-height:30px; }
#nav li { margin:0; padding:0; list-style:none; float:left;
position:relative;
background-color:#0066CC/*#1B6187*/;}
#nav ul li a { text-align:center;
font-family:Georgia;
text-decoration:none;
font-size:14px;
height:30px; display:block;
color:#FFF; width:110.5px;
border:1px solid #006363;
}
#nav ul ul { position:absolute; visibility:hidden; top:32px;}
#nav ul li:hover ul {visibility:visible;}
#nav li:hover { background:#09F;}
#nav ul li:hover ul li a:hover {background-color:#09F;
color:#4EE6DB;}
#nav ul li ul li { background-color:#0066CC/*#1B6187*/;}
#nav a:hover { color:#000;}
.clearFloat {clear:both;}
This happens because the text doesn't scale well when zooming: it stays bigger than you'd expect. The text forces the surrounding li's and a's to get bigger than you'd like.
I recently fixed the same issue by fixing the width of each li (eg: width: 30px). The text will still be bigger than you'd like, but if you use enough padding it has enough space to grow.
What you could also try is position the last li absolutely top top:0, right:0, this will get ugly as the last li will lay over the one before the last
I have a horizontal menu coded in html and css only, this menu has sub-menu and some sub-menu has sub-menu of their own.
It works fine with the first level sub-menu only, but when I insert some sub-menu for any individual sub-menu, they still show up. But I can not reach to click them, they vanishes as my cursor moves. A demo can be found here : http://example.bojroninad.net/pages/menu_demo1.html
However, I was able to watch some steady behavior of this menu sometimes, but most of the time they vanishes before I reach to them.
Here is my html code(pardon me for bad structured code):
`<html>
<link rel="stylesheet" href="menu1_css.css" media="screen" type="text/css">
<div id="menu1">
<ul>
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Team</li>
<li>Offices</li>
</ul>
</li>
<li>Services
<ul>
<li>Web Design </li>
<li>Internet Marketing</li>
<li>Hosting </li>
<li>Domain Names
<ul>
<li>.ORG</li>
<li>.COM</li>
<li>.NET</li>
</ul>
</li>
<li>Broadband </li>
</ul>
</li>
<li>Contact Us
<ul>
<li>United Kingdom</li>
<li>France </li>
<li>USA </li>
<li>Australia </li>
</ul>
</li>
</ul>
</div>
</html>`
and my css code goes here:
#menu1 {
background-color:#ccc;
width:100%;
height:30px;
}
#menu1 ul{
padding:0px;
margin:0px;
}
#menu1 ul li
{
list-style:none;
display:inline;
margin-left:10px;
float:left;
height:30px;
position:relative;
}
#menu1 ul li a{
text-decoration:none;
font-weight:bold;
font-family:Bitstream Cyberbit,Garamond, Minion Web, ITC Stone Serif, MS Georgia;
color:green;
}
#menu1 li a:hover{
text-decoration:underline;
}
#menu1 li ul {
display:none;
margin:0px;
padding:0px;
position:absolute;
left:0px;
top:20px;
width:120px;
background-color:#999;
}
#menu1 li:hover ul{
display:block;
width:160px;
}
#menu1 li li {
display:list-item;
list-style:none;
}
/* second level sub menu */
#menu1 li li ul {
padding:0px;
margin-left:150px;
background-color:white;
top:0px;
position:relative;
}
#menu1 li li li{
display:none;
list-style:none;
position:absolute;
width:120px;
background-color:red;
}
#menu1 li li:hover li{
display:block;
width:100px;
position:relative;
margin-left:0px;
float:left;
height:30px;
}
#menu1 ul li li li a{
text-decoration:none;
font-weight:bold;
font-family:Bitstream Cyberbit,Garamond, Minion Web, ITC Stone Serif, MS Georgia;
color:yellow;
}
#menu1 li li li a:hover{
text-decoration:underline;
}
The problem is that your second and third level list elements are also floated left, making them smaller than the menu itself.
You can solve it by setting:
#menu1 li li {
float: none; /* line 50 */
}
#menu1 li li ul {
position: absolute; /* line 57, is now relative, to avoid growth of li li */
}
As far as I can see, the menu works fine - except that the second-level menu is positioned a bit too low
Usability would also be much better if you changed background color on li:hover + cursor:pointer - so you can see which button in the menu is active (and the user gets a visual feedback when he hovers out).
Maybe somebody has seen this before? When you hover over the "First List" and "Second List" text, the text pops a couple pixels to the left. This only happens in Webkit browsers. Tested in Chrome on Linux and Mac, Safari on Mac, and Android browser. Here's the code. I also made a fiddle: http://jsfiddle.net/XzVLt
#navigation {
line-height:30px;
height:30px;
clear:left;
text-align:left;
position:relative;
}
#navigation li {
padding:0 5px;
margin-left:-1px;
width:100px;
text-align:center;
float:left;
display:inline;
}
#navigation ul ul {
display:block;
position:absolute;
}
#navigation li ul {
margin-left:-5px;
padding-right:10px;
}
#navigation li ul li {
margin-right:-2px;
text-align:left;
line-height:15px;
padding:5px;
clear:both;
width:100%;
}
#navigation ul li {
list-style:none;
}
#navigation ul li {
float:left;
list-style:none;
}
#navigation li ul {
display:none;
}
#navigation li:hover ul {
display:block;
}
#navigation a {
font-size: 0.8em;
}
#navigation li li a {
display:block;
margin-left:10px;
text-indent:-10px;
}
<div id="navigation">
<ul>
<li>
First list
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li>
Second list
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
</div>
I'm guessing that it has something to do with your margins and padding that comes into play as soon as you change the drop-down from display:none to display:block
I use the suckerfish method for drop-downs; you can easily implement this in your method as well. Just change how you phase in the drop-down content as follows:
Replace ...
#navigation li ul {
display:none;
}
#navigation li:hover ul {
display:block;
}
... with ...
#navigation li ul {
position:absolute;
left:-999em;
}
#navigation li:hover ul {
left:auto;
}
Quick tests in Firefox and Safari - it works just fine ... you'll need some JS to create an element to replace the li:hover pseudo or it won't work in IE.
Read more about the method here http://htmldog.com/articles/suckerfish/dropdowns/