/    Sign up×
Community /Pin to ProfileBookmark

CSS file overrides unordered list (UL), and then I can’t get it back to normal

Copy linkTweet thisAlerts:
Feb 20.2016

I’m trying to add a Dropdown Menu inside a Navigation Bar to add to this site.

[url]http://www.kirkbymicrowave.co.uk/index3.php[/url]

The menu itself does not look too bad, but the CSS code, which I took from an example on the W3C site

[url]http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar[/url]

appears to over-ride the definitions of unordered list (UL) and list item (LI). So if you look down the page

[url]http://www.kirkbymicrowave.co.uk/index3.php[/url]

you will see the text “At the moment, 4 kits have been developed” followed by a list, in a totally screwed up manner. Clearly the list is in a format like the menu bar.

Further down there the text “The coaxial N and SMA kits include:”, which should be followed by a list of components, but again it is totally screwed up.

I’m not sure how to restrict the overrides of UL and LI so they *only* effect the menu bar at the top, and not the rest of the site.

I’m an engineer/scientist, not a web developer, so please excuse my ignorance.

Dave

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@tracknutFeb 20.2016 — You need to add some "specificity" to your declarations, to specify a particular unordered list styling, rather than *every* unordered list styling. So, in your heml for the navigation, use something like:
<i>
</i>&lt;ul id="nav"&gt;

Then you can target the #nav list specifically, and ignore other <ul> tags. In your dropwn3.css for the navigation, use:
<i>
</i>ul#nav {...}
#nav li {...]
#nav li a, .dropbtn {...}

etc
Copy linkTweet thisAlerts:
@drkirkbyauthorFeb 20.2016 — You need to add some "specificity" to your declarations, to specify a particular unordered list styling, rather than *every* unordered list styling. So, in your heml for the navigation, use something like:
<i>
</i>&lt;ul id="nav"&gt;

Then you can target the #nav list specifically, and ignore other <ul> tags. In your dropwn3.css for the navigation, use:
[code]
ul#nav {...}
#nav li {...]
#nav li a, .dropbtn {...}

etc
[code][/QUOTE]

Thank you.

Do you mean to have the first line of CSS having ul before the nav,
ul#nav {...}
and other lines with the nav followed by li
#nav li {...]

It does not make much sense to me, so I'm wondering if its a typo, or correct.

Dave
Copy linkTweet thisAlerts:
@tracknutFeb 20.2016 — Correct as I wrote it:

ul#nav => this applies to all <ul>'s named id "nav"

#nav li => this applies to any <li> inside something named "nav"

It's a zen thing... ?
Copy linkTweet thisAlerts:
@drkirkbyauthorFeb 20.2016 — Thank you. That's working now. At first I must have had some other error, as it was not working, so I started to suspect a typo. Now it is ok.
×

Success!

Help @drkirkby spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...