Do you guys have any idea how to remove the right border on my drop down menu? I tried putting right-border: none, right-border: hidden, and right-border: 0px but nothing!
HTML :
<section class="menu">
<ul>
<li><a class="active" href="#"> PORTFOLIO </a>
<ul>
<li> illustrations </li>
<li> portraits </li>
<li> environments </li>
<li> life drawings </li>
</ul>
</li>
<li> STORE
<ul>
<li> society6 </li>
<li> redbubble </li>
</ul>
</li>
<li> CONTACT </li>
<li> ABOUT </li>
</ul>
</section>
CSS :
.menu {
height:29px;
width:100%;
/*background:orange;*/
}
.menu ul {
width:auto;
list-style-type:none;
font-family:"calibri", "arial";
}
.menu ul li {
position:relative;
display:inline;
float:left;
width:auto;
border-right: 2px solid purple;
margin-left:10px;
line-height:12px;
}
.menu ul li a {
display:block;
padding:3px;
color:#854288;
text-decoration:none;
font-size:20px;
font-weight:strong;
padding-right:25px;
}
.menu ul li a:hover, .active {
color:#788d35
}
.menu ul li ul {
display:none;
}
.menu ul li:hover > ul {
display:block;
position:absolute;
top:23px;
float:left;
padding-left:20px;
text-align:left;
margin-left: -30px;
}
.menu ul li ul li {
position:relative;
min-width:135px;
max-width:1350px;
width:100%;
}
.menu ul li ul li a {
padding: 3px;
margin-left: 1px;
border-right: hidden; /* <---- DOES NOT WORK */
}
This removes border from the main menu (after the last item About) :
.menu ul li:last-child{ border:none; }
JSFiddle
If you also want to remove border from the nested lis, you should add border:none to .menu ul li ul li :
JSFiddle
try this
#right_border_less{
border:solid;
border-right:none;
}
Related
Can anyone tell me why this nav renders as it should do in everything but IE9 and how i can work around this.
The project needs to be IE9 compatible.
This works fine in IE11
Here is my code. Thanks.
HTML
<li> Tills
<ul>
<li>Base Unit</li>
<li>Card Reader
<ul id="secondMenu" onclick="navClick()">
<li>Not Reading Cards</li>
<ul></li>
</ul></li></ul>
<li>Cash Drawer</li>
<li>Customer Display</li>
<li>Reciept Printer
<ul id="secondMenu" onclick="navClick()">
<li> Printing with blank areas </li>
<ul></li>
</ul></li></ul>
<li>Scanner
<li>Touchscreen
<ul id="secondMenu" onclick="navClick()">
<li>Black or faint pictiure</li>
<li>Distorted or fuzzy display</li>
</ul>
</li>
</ul>
</li>
<li> Self Check Out</li>
<li> Controller</li>
<li> Photo</li>
<li> iPads
<ul id="secondMenu" onclick="navClick()">
<li> Not connecting to BUK Corporate </li>
<ul></li>
</ul></li></ul>
<li> Handhelds</li>
<li> Personal Computing</li>
<li> Printing</li>
<li> Password Resets</li>
<li> Other</li>
</ul>
</nav>
Here is the CSS
nav {
display:block;
margin:8px 0px 10px 0px;
padding:0;
border-radius:10px;
text-align:center;
width:15.6%;
font-weight: 4000;
float:left;
z-index:999;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul{
list-style:none;
background:#5e6ea6;
}
nav ul li {
position:relative;
text-align:center;
border:4px solid #2f4389;
color:#FFF;
z-index:98;
font-size: 118%;
}
nav ul li a{
text-decoration:none;
color:white;
display:block;
background:#5e6ea6;
padding-bottom:7.9%;
padding-top:7.9%;
}
nav ul li:hover > a{
background-color:orange;
display: block;
}
nav ul ul{
position:absolute;
display:none;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
font-weight: 4000;
font-size: 70%;
}
nav ul ul li {
float: none;
border-top: 1px solid #2f4389 ;
border-bottom: 1px solid #2f4389;
position: relative;
width:275px;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li:hover > a {
background: orange;
border:1px solid white;
}
nav ul li:hover ul{
width:100%;
position:absolute;
left:100%;
top:0;
}
I´m trying to make a submenu on hover for hours, read about ten tutorials or more and finally don't get it working.
I want it to show "Zimmer", "Reservierung" and "Preise" in a vertical menu if I hover "Hotel" and so on.
This is my code:
a {
text-decoration: none;}
nav {
height: 50px;
clear: both;}
nav ul {
padding: 5px 0px;
text-align: center;}
nav li {
margin: 0px;
display: inline;
padding: 0px;}
nav li a {
font-size: 18px;
color: #775923;
padding: 0px 20px;
margin: 0px;}
nav li a:hover, nav li a.current {
color: #775923;
padding: 0px 20px 14px 20px;
-webkit-padding-after: 15px;
box-shadow: 0 4px #b1d130;}
nav ul ul{
display: none;}
nav ul li:hover ul {
display: block;}
<nav>
<ul>
<li>Willkommen</li>
<li>Hotel</li>
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
<li>Restaurant</li>
<ul>
<li>Speisekarte</li>
<li>Anlässe</li>
</ul>
<li>Anfahrt</li>
<li>Kontakt</li>
<ul>
<li>Team</li>
<li>Über Uns</li>
</ul>
</ul>
</nav>
Link: http://jsfiddle.net/AuJeF/445/
Hope you can help.
Thank you
You have the problem on your markup,
change as following-
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
(this is a simple dropdown menu)
<nav>
<ul>
<li>Willkommen</li>
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
<li>Restaurant<ul>
<li>Speisekarte</li>
<li>Anlässe</li>
</ul>
</li>
</ul>
</nav>
css
nav
{
margin-top:15px
}
nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
nav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
nav ul li.current-menu-item
{
background:#ddd
}
nav ul li:hover
{
background:#f6f6f6
}
nav ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
nav ul ul li
{
float:none;
width:200px
}
nav ul ul a
{
line-height:120%;
padding:10px 15px
}
nav ul ul ul
{
top:0;
left:100%
}
nav ul li:hover > ul
{
display:block
}
jsfiddle
the mistake in you html. ul > ul mast be insite li. But not outsideю
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
You're writing style - if ul inside li then ul display block. But inside li no ul it after him.
Will validator error, because tag ul inside >ul that's not true, there can be only >li
Think, I help U
I have been working all night - just to fix a submenu. Here is my CSS:
/*************First Menu Layer************/
#navigation {
width:820px;
background-color:#45AAFF;
height:22px;
border-bottom:1px solid #fff;
font-family:'Signika',sans-serif
}
#navigation ul {
margin:0;
padding:0
}
#navigation li {
height:22px;
float:left;
position:relative;
display:block
}
#navigation li a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding:5px 15px 6px;
border-right:1px solid #fff
}
#navigation li a:hover {
text-decoration:underline;
background-color:#06C
}
/*************Second Menu Layer************/
#navigation li ul {
display:none;
position:absolute
}
#navigation li:hover ul {
display:block;
text-decoration:none;
background-color:#45AAFF;
border-bottom:1px dotted #006AC3
}
#navigation li ul li a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding:5px 15px 6px;
border-style:none
}
#navigation li ul li a:hover {
text-decoration:none;
border-bottom:1px solid #006AC3
}
And this is my HTML:
<!DOCTYPE html>
<html>
<head>
<link href="submenu.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div id="navigation">
<ul>
<li>
News
<ul>
<li>
National
</li>
<li>
International
</li>
<li>
Sport
</li>
<li>
Hollybood
</li>
</ul>
</li>
<li>
Technology
<ul>
<li>
IT/Software
</li>
<li>
Hardware
</li>
<li>
Iphone
</li>
<li>
Neuro Science
</li>
</ul>
</li>
<li>
Sports
<ul>
<li>
Cricket
</li>
<li>
Tenis
</li>
<li>
Badminton
</li>
<li>
Hockey
</li>
</ul>
</li>
<li>
Country
<ul>
<li>
India
</li>
<li>
America
</li>
<li>
France
</li>
<li>
Pakistaan
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
1st problem: My Submenu block doesn't show properly. If the menu contain with more than one word, the next word go to the next line. How can I make it inline? Refer to this image: http://i.stack.imgur.com/9SqWf.jpg
2nd Problem: When I hover to the submenu, how can I make them standardized? Please refer to this image: http://i.stack.imgur.com/DULg6.jpg
One of it left empty space on the right - it suppose to show full blue background, following the longest menu.
Can somebody help me to explain and solve this issue? I just want to make them tidy.
There are some problems in the code.
1. You mentioned the element as position: absolute, but you didn't mention the perfect width for them.
2. Selector defining was the main problem in the code.
3. Padding Measurement
You can copy the whole css & Most Importantly Use Indentation Always
/*************First Menu Layer************/
#navigation {
width:820px;
background-color:#45AAFF;
height:22px;
border-bottom:1px solid #fff;
font-family:'Signika',sans-serif;
}
#navigation ul {
margin:0;
padding:0;
}
#navigation li {
height:22px;
float:left;
position:relative;
display:block;
}
#navigation>ul>li>a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding:5px 15px 6px;
border-right:1px solid #fff;
}
#navigation li a:hover {
text-decoration:underline;
}
/*************Second Menu Layer************/
#navigation li ul {
display:none;
position:absolute;
}
#navigation li:hover ul {
display:block;
text-decoration:none;
background-color:#45AAFF;
border-bottom:1px dotted #006AC3;
width: 250px;
}
#navigation li ul li{
position: relative;
min-width: 100%;
padding: 5px 0px 5px 0px;
}
#navigation li ul li a {
color:#fff;
line-height:22px;
font-size:14px;
text-decoration:none;
padding: 5px 0px 5px 0px;
border-style:none;
display: inline-block;
min-width: 100%;
}
#navigation li ul li a:hover {
text-decoration:none;
border-bottom:1px solid #006AC3;
background-color:#06C;
}
I can't seem to make the drop-down <ul> align with it's parent <li>.
What am I doing wrong?
HTML:
<nav id="toolbar">
<ul>
<li>
Section1</li>
<li>
Section2
<ul>
<li>
SubA
</li>
</ul>
</li>
<li>
Section3
<ul>
<li>SubB</li>
</ul>
</li>
<li>
Section4
</li>
</ul>
</nav>
CSS:
#toolbar ul {list-style-type:none;
}
#toolbar ul li {display:block;
position:relative;
float:left;
margin:0px 5px;
}
#toolbar li ul {display:none;
}
#toolbar ul li:hover ul {display: block;
position:absolute;
}
Fiddle
ul elements have a default padding-left value applied by the user-agent, so by removing that you get the alignment you asked for (There is also a margin added by you, but I'm gonna ignored it since you've added it yourself).
#toolbar ul {
padding-left: 0;
}
or (if you want to target only the sub-menu):
#toolbar ul ul {
padding-left: 0;
}
Demo
What adonis said was absolutely correct. There are certain other elements which take default padding and margin. So try using reset before styling any element.
*{margin:0;padding:0;}
if no list item of your page wants default bullets you may also include list-style:none in the above reset lines of code.
There is margin and padding in this case (you add the margin yourself) which is affecting it.
View here for a fix
(this has outlines for more visual proof)
CSS:
#toolbar ul {
padding: 0;
list-style-type:none;
}
#toolbar ul > li {
display:block;
position:relative;
float:left;
margin:0px 5px;
}
#toolbar li ul {
display:none;
}
#toolbar ul li:hover ul {
display: block;
position:absolute;
}
#toolbar ul ul > li {
margin: 0;
}
Try this one i have pasted the code here
HTML:
<nav id="toolbar">
<ul>
<li>
Section1</li>
<li>
Section2
<ul>
<li>
SubA
</li>
</ul>
</li>
<li>
Section3
<ul>
<li>SubB</li>
</ul>
</li>
<li>
Section4
</li>
</ul>
</nav>
CSS:
#toolbar ul {list-style-type:none;
}
#toolbar ul li {display:block;
position:relative;
float:left;
margin:0px 5px;
}
#toolbar li ul {display:none;
}
#toolbar ul li:hover ul {
display: block;
position:absolute;
}
#toolbar ul li:hover ul li{
margin-left: -30px;
}
I am new to css, and have tried to make this work for a while with no luck
basically i want to display a drop down when "MENU" is selected but nothing seems to happen here is my css:
#tabs {
margin-top:-12ex;
float:left;
width:100%;
font-size:100%;
line-height:10px;
vertical-align:top;
margin-left:20px;
position:static;
}
#tabs ul {
margin:0;
padding:1px 1px 0 20px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:5;
}
#tabs a {
float:left;
background:url("../images/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 3px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("../images/tabright.gif") no-repeat right top;
padding:10px 10px 10px 10px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FFF;
}
#tabs a:hover{
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
div#tabs ul ul,
div#tabs ul li:hover ul ul,
div#tabs ul ul li:hover ul ul
{display: none;}
div#tabs ul li:hover ul,
div#tabs ul ul li:hover ul,
div#tabs ul ul ul li:hover ul
{display: block;}
Here is my html
<body>
<div id="wrapper">
<table height="860px">
<tr>
<td colspan="2" width="710px" height="150px">
</td>
</tr>
<tr>
<td colspan="2" width="710px" height="50px" valign="bottom">
<div id="tabs">
<ul>
<li><span>HOME</span></li>
<li><span>CATERING</span></li>
<li><span>MENU</span></li>
<ul>
<li>
<span>hey</span> //i want this to pop when hovering menu
<li>
</ul>
<li><span>RESERVATIONS</span></li>
<li><span>EVENTS</span></li>
<li><span>ABOUT US</span></li>
<li><span>CONTACT US</span></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
Well once I fixed the few typos. I realised that you hadn't put the sub menu inside the <li> of the MENU.
here's the new list html, the css is fine for now:
<div id="tabs">
<ul>
<li><span>HOME</span></li>
<li><span>CATERING</span></li>
<li><span>MENU</span>
<ul>
<li>
<span>hey</span>
</li>
</ul>
</li>
<li><span>RESERVATIONS</span></li>
<li><span>EVENTS</span></li>
<li><span>ABOUT US</span></li>
<li><span>CONTACT US</span></li>
</ul>
</div>
Edit:
You need to make the inside <ul> appear absolute in the css, something like this:
#tabs {
width:100%;
}
#tabs>ul>li {
display:block; position:relative;
float:left;
list-style:none outside;
margin:0 10px;
}
#tabs>ul>li:hover ul{display:block}
#tabs>ul>li>a{
display:block;
}
#tabs>ul>li ul{
position:absolute; display:none;
list-style:none;
}
You need to put that secondary list inside your menu, like this:
<li>
<span>MENU</span></li>
<ul>
<li>
<span>hey</span>
</li>
</ul>
</li>
Also, remember to use the css selector > when you want to put rules on the first list only:
#tabs>ul>li{
/* css */
}