Horizontal menu CSS not working in IE7 - html

I am trying to create a horizontal drop down menu with 3 levels of sub menus. I have almost created all menu items. I am trying to make it cross browser compatible. While I was testing in IE7 menu is not diaplaying properly. float is not working. Please suggest me what to do?
here is my code:
<ul id="menu_new">
<li>Home</li>
<li>Applications
<ul>
<li>Agency
<ul>
<li><a href="/apps/banner/web_links/NVE_South_Agency_PRDv2.ica" >NVE South</a></li>
<li>NVE North</li>
</ul>
</li>
<li>Manual Crawl</li>
<li>Crawl Interval</li>
<li>Archive List</li>
</ul>
</li>
<li> Visual Analytics</li>
<li>Settings
<ul>
<li>Manage Subject
<ul>
<li><a href="#" >Add Subject</a></li>
<li>Edit Subject</li>
<li>Delete Subject</li>
<li>Export Subject</li>
</ul>
</li>
<li>Manual Crawl</li>
<li>Crawl Interval</li>
<li>Archive List</li>
</ul>
</li>
</ul>
Fiddle Link
Result in IE8:
Result in IE7:


#menu_new > li{
display:inline-block;
position:relative;
line-height:35px;
height:35px;
*display:inline;/*Add this code of line*/
zoom:1; /*and Add this code of line*/
}

Related

add space between ul and li tag css inline

I've the following code with nested list items as shown below:
<ul style={{padding-top: '15px'}}>
<li style={{margin-left: '20px'}}>First Services</li>
<ul style={{margin-left: '30px'}}>
<li>get1</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get2</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get3</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get4</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get5</li>
</ul>
<li style={{margin-left: '20px'}}>Second Services</li>
<ul style={{margin-left: '30px'}}>
<li>get6</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get7</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get8</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get9</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get10</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get11</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get12</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get13 </li>
</ul>
<li style={{margin-left: '20px'}}>Workflows</li>
<ul style={{margin-left: '30px'}}>
<li>Workflow for someone </li>
</ul>
</ul>
My Goal:
I want some space between the following:
1) First Services and get1
2) get5 and Second Services
3) Second Services and get6
4) get13 and Workflows
5)Workflows and Workflow for someone
How should I go about it? Is adding an empty paragraph tag <p></p> a good idea between each of the above 5 things?

if you mean horizontal space (white space), use: &nbsp ;
if you mean vertical space, try: (CSS property) line-height, padding
or margin.
you might want to remove this from being inline and use your linked stylesheet instead as it might cause issues with your styling.

You should use classes for this. Right now, the simplest way is to wrap a div around your whole list, apply a class to it (in my example I used parent_class) and use this selector: div.parent_class > ul >li It only selects the li elements of the first level ul:
div.parent_class > ul >li {
margin-top: 10px;
margin-bottom: 10px;
}
<div class="parent_class">
<ul style="padding-top:15px;">
<li style="margin-left:20px">First Services</li>
<ul style="margin-left:30px">
<li>get1</li>
</ul>
<ul style="margin-left:30px">
<li>get2</li>
</ul>
<ul style="margin-left:30px">
<li>get3</li>
</ul>
<ul style="margin-left:30px">
<li>get4</li>
</ul>
<ul style="margin-left:30px">
<li>get5</li>
</ul>
<li style="margin-left:20px">Second Services</li>
<ul style="margin-left:30px">
<li>get6</li>
</ul>
<ul style="margin-left:30px">
<li>get7</li>
</ul>
<ul style="margin-left:30px">
<li>get8</li>
</ul>
<ul style="margin-left:30px">
<li>get9</li>
</ul>
<ul style="margin-left:30px">
<li>get10</li>
</ul>
<ul style="margin-left:30px">
<li>get11</li>
</ul>
<ul style="margin-left:30px">
<li>get12</li>
</ul>
<ul style="margin-left:30px">
<li>get13 </li>
</ul>
<li style="margin-left:20px">Workflows</li>
<ul style="margin-left:30px">
<li>Workflow for someone </li>
</ul>
</ul>
</div>

.example-list {
margin:0px;
}
.example-list > li {
margin: 30px 0px;
}
<ul class="example-list">
<li>First Services</li>
<ul>
<li>get1</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get2</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get3</li>
</ul>
<ul>
<li>get4</li>
</ul>
<ul>
<li>get5</li>
</ul>
<li style={{margin-left: '20px'}}>Second Services</li>
<ul>
<li>get6</li>
</ul>
<ul>
<li>get7</li>
</ul>
<ul>
<li>get8</li>
</ul>
<ul>
<li>get9</li>
</ul>
<ul>
<li>get10</li>
</ul>
<ul>
<li>get11</li>
</ul>
<ul>
<li>get12</li>
</ul>
<ul>
<li>get13 </li>
</ul>
<li style={{margin-left: '20px'}}>Workflows</li>
<ul>
<li>Workflow for someone </li>
</ul>
</ul>

I would do the following (or something similar - keep in mind it's not good practice to have <ul> as a child of another <ul> - you can validate here: http://validator.w3.org/). Remove the inline styles, you'll deal with A LOT of headaches later if you write you CSS as you have. Set classnames for the bits you want extra space for (you can edit the {{20px}} below for how much space you want (or if you want left/right margins, you can edit the whole rule).
<style>
.title {
margin-left: 20px;
}
.top-list {
padding-top: 15px;
}
.top-list .spacer-top {
margin-top: {{20px}};
}
.top-list > li > ul {
margin-left: 30px;
}
</style>
<ul class="top-list">
<li class="title">First Services</li>
<li class="spacer-top">
<ul>
<li>get1</li>
</ul>
</li>
<li>
<ul>
<li>get2</li>
</ul>
</li>
<li>
<ul>
<li>get3</li>
</ul>
</li>
<li>
<ul>
<li>get4</li>
</ul>
</li>
<li>
<ul>
<li>get5</li>
</ul>
</li>
<li class="title" class="spacer-top">Second Services</li>
<li class="spacer-top">
<ul>
<li>get6</li>
</ul>
</li>
<li>
<ul>
<li>get7</li>
</ul>
</li>
<li>
<ul>
<li>get8</li>
</ul>
</li>
<li>
<ul>
<li>get9</li>
</ul>
</li>
<li>
<ul>
<li>get10</li>
</ul>
</li>
<li>
<ul>
<li>get11</li>
</ul>
</li>
<li>
<ul>
<li>get12</li>
</ul>
</li>
<li>
<ul>
<li>get13 </li>
</ul>
</li>
<li class="title spacer-top">Workflows</li>
<li class="spacer-top">
<ul>
<li>Workflow for someone </li>
</ul>
</li>
</ul>

Stop event.preventDefault being applied to all links

I have a CSS menu hover that isn't working on iPad. Looking around I found this answer on Stack Overflow. To trigger the hover I have set up an event.preventDefault on the top level links which is working great. However this being applied to all links under the menu which means you cant navigate around the website.
I have created a jsFiddle.
How can I make it so that anything with a class .menu-item-has-children the event is prevented but for any other <a></a> under that class is works.
Unfortunately/annoyingly its not possible to edit the HTML markup
Here is my code:
HTML
<nav id="top-menu">
<ul>
<li class="menu-item-has-children"><a>Link 1</a>
<ul>
<li>Google</li>
<li class="menu-item-has-children">Google
<ul>
<li>Google 1</li>
<li>Google 1</li>
<li>Google 1</li>
<li>Google 1</li>
</ul>
</li>
<li>Google</li>
<li>Google</li>
</ul>
</li>
<li class="menu-item-has-children"><a>Link 2</a>
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</li>
<li class="menu-item-has-children"><a>Link 3</a>
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</li>
<li class="menu-item-has-children"><a>Link 4</a>
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</li>
</ul>
jQuery:
$("#top-menu .menu-item-has-children a").click(function( event ) {
event.preventDefault();
console.log('clicked');
});

Add a > (CSS Direct Descendant Selector):
$("#top-menu .menu-item-has-children > a").click(function( event ) {
event.preventDefault();
console.log('clicked');
});
That selects only<a/> tags that are a direct descendant of menu-item-has-children.
So for example, in this code block, it selects the 'Link 2' anchor, but not any 'Google' anchor:
<li class="menu-item-has-children"><a>Link 2</a>
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</li>

how to make a menu highlighted while pointing sub menu?

I am making a menu bar with sub menus. what i need while hovering mouse to menu the sub menu will appear and menu has to be highlighted. Please help me.....
<div class="side-bar">
<ul class="">
<li>Home
</li>
<li>About Us
</li>
<li>Portfolio
<ul>
<li>SELECTED PROJECTS
</li>
<li>program
<!-- i need this to be highlighted while cursoring sub menu -->
<ul>
<li>RESIDENTIAL
</li>
<li>HOSPITALITY
</li>
<li>INSTITUTION &AMP; COMMERCIAL
</li>
<li>INFRASTRUCTURE
</li>
<li>EDUCATIONAL
</li>
<li>COMMUNITY
</li>
<li>HEALTHCARE
</li>
<li>FACTORY
</li>
<li>FARM HOUSES
</li>
<li>PRIVATE RESIDENCES
</li>
<li>INTERIORS
</li>
</ul>
</li>
<li>chronological
</li>
</ul>
</li>
<li>services
</li>
<li>news
</li>
<li>Press
</li>
<li>D [+] DR
</li>
<li>Careers
</li>
<li>Contact Us
</li>
</ul>
</div>

You can simply do that using CSS, so try this:
li:hover > a {
/* Selects all <a> elements that are placed immediately after <li> which is hovered */
color: #FFF; /* or any code you want */
}
So if the mouse is over the li itself it will be highlighted, also if it's over ul or li inside the first li it will be also highlighted
Hope this will help you ..

Insert a div class inside wordpress menu

<ul id="menu">
<li>About Assetline
<li>Products & Services
<div id="mega">
<ul>
<li>Commercial Credit</li>
</ul>
<ul>
<li>Portfolio Management</li>
</ul>
</div><!--mega-->
</li>
<li>News & Events
</ul>
This is the menu structure what I want to integrate into WordPress . But there's an issue to add a div id ( ) inside of a menu . Any idea to achieve this ?

You forgot to close some of your first li tags. If that does work, remove the div, and assign the id in the child ul.
<ul>
<li>
<a>level 1</a>
<ul id="mega">
<li>
<a>level 2 A</a>
</li>
<li>
<a>level 2 B</a>
<ul>
<li>
<a>level 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Make an item in list align to right using CSS 3

I have a list as follows:
<ul id="menu">
<li>Home</li>
<li>Work
<ul>
<li>CSS Development</li>
<li>Graphic Design</li>
<li>Development Tools</li>
<li>Web Design</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
<li>Feedback</li>
</ul>
I am attaching an image of so far what I have done.
In this menu, I want to align feedback to the right side.
How can I do it?

Add this to your CSS content.
li:last-child will select the last li of the menu list.
Demo
#menu > li:last-child
{
float:right;
}

Just use float: right;:
<ul id="menu">
<li>Home</li>
<li>Work
<ul>
<li>CSS Development</li>
<li>Graphic Design</li>
<li>Development Tools</li>
<li>Web Design</li>
</ul>
</li>
<li>About</li>
<li>Contact Us</li>
<li style="float: right;">Feedback</li>
</ul>
You can check the demo here.

Aside from float you can also use position:absolute inside of a position:relative container. (Inline CSS for example purposes only.)
<ul id="menu" style="position:relative;width:1008px;height:40px;display:block;">
<li class="right" style="position:absolute;right:20px;">
Feedback</li>

I had the same question but for the whole list.
Float does not realy work there, so here is what worked for me:
ul{
direction:rtl;
}
This way all your li elements including their ::marker's will be pulled to the right of the parent container.
You can also combine this with selectors to just move single li elements.
ul:first-child,
ul:nth-child(2),
ul:last-child{
direction:rtl;
}

This will pull the entire menu to the right and have the dropdown sub menu pull right also instead of displaying off the screen.
<div class="top-menu">
<ul class="nav navbar-nav pull-right"><li class="dropdown dropdown-user">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-settings"></i>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="page_user_profile_1.html">
<i class="icon-user"></i> My Profile
</a>
</li>
</ul>
</li>
</ul>
</div>