Zaloguj | Zarejestruj | FAQ
Anonymous

The order of Css Syntaxes

+ Odpowiedz

Posty: 2 Strona 1 z 1


The order of Css Syntaxes

przez m.hooijberg » Wt kwi 05, 2016 6:14 pm

Here's my website wolfpapers.comlu.com now my problem is that if you go to wallpapers and then stand on catagories the top right of the left container should be setted to 0px so i mean that on hover the border-top-right-radius has to be set to 0px and i've tried .dropdown1-1:hover .dropdown-content1 {border-top-right-radius: 0px} doesn't work i have also tried to give it a personal id and such things plz help me ps i couldn't attach the html and css document so here is the code for html:
<html>
<head>
<title></title>
<link rel="shortcut icon" type="image/x-icon" href="Images/On The Website/Logo(Small).png" />
<link rel="stylesheet" type="text/css" href="Style/body.css" />
<link rel="stylesheet" type="text/css" href="Style/header.css" />
<link rel="stylesheet" type="text/css" href="Style/dorpdown.css" />
<link rel="stylesheet" type="text/css" href="Style/text.css" />
</head>
<body id="body">
<h1 id="hoi">hoi</h1>
<div id="Header">
<div id="Hdr-Img">
<div id="Hdr-Lgo">
<figure>
<img id="Lgo" src="Images/On The Website/Logo(Big).png" draggable="false" />
</figure>
</div>
<div id="Hdr-Slt">
<figure>
<img class="Hdr-bg" id="Hdr-Slt1" src="Images/On The Website/Header.png" draggable="false" />
</figure>
</div>
<div id="Hdr-Srl">
<figure>
<img class="Hdr-bg" id="Hdr-Srl1" src="Images/On The Website/Header.png" draggable="false" />
</figure>
</div>
</div>
<div id="Hdr-txt">
<div id="solid">
<a id="H-Btn" href="index.htm">Home</a>
<div class="dropdown1">
<h1 class="dropbtn1">Wallpapers</h1>
<div class="dropdown-content1">
<a class="ddc1" href="#">Made By WolfPapers</a>
<div class="dropdown1-1">
<a class="dropbtn1-1" href="#">Categories</a>
<div class="dropdown-content1-1">
<a class="ddc1" href="#">HD</a>
<a href="#">Animals</a>
<a class="ddc2" href="#">Space</a>
</div>
</div>
<a class="ddc2" href="#">link 3</a>
</div>
</div>
<div class="dropdown3">
<h1 class="dropbtn3">About Us</h1>
<div class="dropdown-content3">
<a id="ddc5" href="#">link 1</a>
<a href="#">link 2</a>
<a id="ddc6" href="#">link 3</a>
</div>
</div>
<div class="dropdown4">
<h1 class="dropbtn4">Contact Us</h1>
<div class="dropdown-content4">
<a id="ddc7" href="#">link 1</a>
<a href="#">link 2</a>
<a id="ddc8" href="#">link 3</a>
</div>
</div>
</div>
<div id="scroll">
<div>
<a id="H-Btn-Srl" href="index.htm">Home</a>
<div class="dropdown1-Srl">
<h1 class="dropbtn1-Srl">Projects</h1>
<div class="dropdown-content1-Srl">
<a id="ddc1-Srl" href="#">link 1</a>
<a href="#">link 2</a>
<a id="ddc2-Srl" href="#">link 3</a>
</div>
</div>
<div class="dropdown2-Srl">
<h1 class="dropbtn2-Srl">Wallpapers</h1>
<div class="dropdown-content2-Srl">
<a id="ddc3-Srl" href="#">link 1</a>
<a href="#">link 2</a>
<a id="ddc4-Srl" href="#">link 3</a>
</div>
</div>
<div class="dropdown3-Srl">
<h1 class="dropbtn3-Srl">About Us</h1>
<div class="dropdown-content3-Srl">
<a id="ddc5-Srl" href="#">link 1</a>
<a href="#">link 2</a>
<a id="ddc6-Srl" href="#">link 3</a>
</div>
</div>
<div class="dropdown4-Srl">
<h1 class="dropbtn4-Srl">Contact Us</h1>
<div class="dropdown-content4-Srl">
<a id="ddc7-Srl" href="#">link 1</a>
<a href="#">link 2</a>
<a id="ddc8-Srl" href="#">link 3</a>
</div>
</div>
</div>
</div>
</div>
<div id="form">
<form>
Username:<br>
<input type="text" name="username" size="12"><br>
Password:<br>
<input type="password" name="psw" size="12"><br><br>
<input type="submit" value="Login">
</form>
<a href="" id="Reg">Register</a>
<a href="" id="For">Forgot Password?</a>
</div>
</div>
</body>
</html>

And here's the css code:
/* DropDown-Menu of "Wallpapers" */
.dropbtn1 {
position: absolute;
top: 4px;
left: 545px;
height: 44px;
width: 158px;
color: white;
border: none;
cursor: pointer;
z-index: 8;
}
.dropbtn1-1 {
display: block;
position: relative;
top: 0px;
left: 0px;
min-width: 128px;
background-color: #060606;
padding: 5px 16px;
cursor: pointer;
z-index: 9;
}

.dropdown1 {
display: inline-block;
position: relative;
}
.dropdown1-1 {
position: relative;
display: inline-block;
}

.dropdown-content1 {
display: none;
position: absolute;
top: 70px;
left: 545px;
min-width: 160px;
background-color: #060606;
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: #00EDEC;
z-index: 9;
}
.dropdown-content1-1 {
display: none;
position: absolute;
top: -48px;
left: 160px;
min-width: 160px;
background-color: #060606;
border-style: solid;
border-width: 2px;
border-top-left-radius: 0px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-color: #00EDEC;
z-index: 2;
}

.dropdown-content1 a, span {
color: #FFFFFF;
padding: 5px 16px;
text-decoration: none;
display: block;
}

.ddc1 {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.ddc2 {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.dropdown-content1 a:hover {
background-color: #121212;
}

.dropdown1:hover .dropdown-content1 {
display: block;
}
.dropdown1-1:hover .dropdown-content1-1 {
display: block;
}

.dropdown1:hover .dropbtn1 {
color: #EAEAEA;
}
.dropdown1-1:hover .dropdown-content1 {
border-top-right-radius: 0px;
}
/* End Of DropDown-Menu of "Wallpaper" */
/* DropDown-Menu of "About Us" */
.dropbtn3 {
position: absolute;
top: 4px;
left: 800px;
height: 44px;
width: 129px;
color: white;
border: none;
cursor: pointer;
z-index: 8;
}

.dropdown3 {
display: inline-block;
position: relative;
}

.dropdown-content3 {
display: none;
position: absolute;
top: 70px;
left: 800px;
min-width: 160px;
background-color: #060606;
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: #3FA000;
z-index: 9;
}

.dropdown-content3 a {
color: #FFFFFF;
padding: 5px 16px;
text-decoration: none;
display: block;
}

#ddc5 {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#ddc6 {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.dropdown-content3 a:hover {
background-color: #121212;
}

.dropdown3:hover .dropdown-content3 {
display: block;
}

.dropdown3:hover .dropbtn3 {
color: #EAEAEA;
}
/* End Of DropDown-Menu of "About Us" */
/* DropDown-Menu of "Contact Us" */
.dropbtn4 {
position: absolute;
top: 4px;
left: 1024px;
height: 44px;
width: 152px;
color: white;
border: none;
cursor: pointer;
z-index: 8;
}

.dropdown4 {
display: inline-block;
position: relative;
}

.dropdown-content4 {
display: none;
position: absolute;
top: 70px;
left: 1024px;
min-width: 160px;
background-color: #060606;
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: #F2D800;
z-index: 9;
}

.dropdown-content4 a {
color: #FFFFFF;
padding: 5px 16px;
text-decoration: none;
display: block;
}

#ddc7 {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#ddc8 {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.dropdown-content4 a:hover {
background-color: #121212;
}

.dropdown4:hover .dropdown-content4 {
display: block;
}

.dropdown4:hover .dropbtn4 {
color: #EAEAEA;
}
/* End Of DropDown-Menu of "Contact Us" */

/* ======================================================================================== */

/* DropDown-Menu of "Projects" */
.dropbtn1-Srl {
position: fixed;
top: 33px;
left: 475px;
height: 44px;
width: 112px;
color: white;
border: none;
cursor: pointer;
z-index: 3;
}

.dropdown1-Srl {
position: relative;
display: inline-block;
}

.dropdown-content1-Srl {
display: none;
position: fixed;
top: 99px;
left: 475px;
min-width: 160px;
background-color: #060606;
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: #00EDEC;
z-index: 3;
}

.dropdown-content1-Srl a {
color: #FFFFFF;
padding: 12px 16px;
text-decoration: none;
display: block;
}

#ddc1-Srl {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#ddc2-Srl {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.dropdown-content1-Srl a:hover {
background-color: #121212;
}

.dropdown1-Srl:hover .dropdown-content1-Srl {
display: block;
}

.dropdown1-Srl:hover .dropbtn1-Srl {
color: #EAEAEA;
}
/* End Of DropDown-Menu of "Projects" */
/* DropDown-Menu of "Wallpapers" */
.dropbtn2-Srl {
position: fixed;
top: 33px;
left: 710px;
height: 44px;
width: 158px;
color: white;
border: none;
cursor: pointer;
z-index: 3;
}

.dropdown2-Srl {
position: relative;
display: inline-block;
}

.dropdown-content2-Srl {
display: none;
position: fixed;
top: 99px;
left: 710px;
min-width: 160px;
background-color: #060606;
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: #3FA000;
z-index: 3;
}

.dropdown-content2-Srl a {
color: #FFFFFF;
padding: 12px 16px;
text-decoration: none;
display: block;
}

#ddc3-Srl {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#ddc4-Srl {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.dropdown-content2-Srl a:hover {
background-color: #121212;
}

.dropdown2-Srl:hover .dropdown-content2-Srl {
display: block;
}

.dropdown2-Srl:hover .dropbtn2-Srl {
color: #EAEAEA;
}
/* End Of DropDown-Menu of "Wallpaper" */
/* DropDown-Menu of "About Us" */
.dropbtn3-Srl {
position: fixed;
top: 33px;
left: 1005px;
height: 44px;
width: 129px;
color: white;
border: none;
cursor: pointer;
z-index: 3;
}

.dropdown3-Srl {
position: relative;
display: inline-block;
}

.dropdown-content3-Srl {
display: none;
position: fixed;
top: 99px;
left: 1005px;
min-width: 160px;
background-color: #060606;
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: #F2D800;
z-index: 3;
}

.dropdown-content3-Srl a {
color: #FFFFFF;
padding: 12px 16px;
text-decoration: none;
display: block;
}

#ddc5-Srl {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#ddc6-Srl {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.dropdown-content3-Srl a:hover {
background-color: #121212;
}

.dropdown3-Srl:hover .dropdown-content3-Srl {
display: block;
}

.dropdown3-Srl:hover .dropbtn3-Srl {
color: #EAEAEA;
}
/* End Of DropDown-Menu of "About Us" */
/* DropDown-Menu of "Contact Us" */
.dropbtn4-Srl {
position: fixed;
top: 33px;
left: 1295px;
height: 44px;
width: 152px;
color: white;
border: none;
cursor: pointer;
z-index: 3;
}

.dropdown4-Srl {
position: relative;
display: inline-block;
}

.dropdown-content4-Srl {
display: none;
position: fixed;
top: 99px;
left: 1295px;
min-width: 160px;
background-color: #060606;
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: #F51F00;
z-index: 3;
}

.dropdown-content4-Srl a {
color: #FFFFFF;
padding: 12px 16px;
text-decoration: none;
display: block;
}

#ddc7-Srl {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#ddc8-Srl {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.dropdown-content4-Srl a:hover {
background-color: #121212;
}

.dropdown4-Srl:hover .dropdown-content4-Srl {
display: block;
}

.dropdown4-Srl:hover .dropbtn4-Srl {
color: #EAEAEA;
}
/* End Of DropDown-Menu of "Contact Us" */
Avatar użytkownika

m.hooijberg

  • Posty: 13
  • Dołączył(a): N maja 03, 2015 4:50 pm
  • Lokalizacja: Nederlands

Re: The order of Css Syntaxes

przez johnmacd » Cz kwi 14, 2016 1:05 pm

Please try this link for order of CSS syntaxes:

https://www.w3.org/TR/2001/WD-css-style-attr-20010305
Avatar użytkownika

johnmacd

  • Posty: 23
  • Dołączył(a): Cz cze 13, 2013 12:50 pm
--
Website Designer with 7 years experience as WordPress Developer. Affordable, Professional and Experienced. 100% Satisfaction. 24/7 Available.


+ Odpowiedz

Strona 1 z 1