html - How do I edit the div:hover property? -

-

fixed

i have been tweaking position , display elements of css code , can't seem figure out how edit code. don't understand how div should edited. want allow hover of div box size of button is. when hover on horizontal space buttons aligned, drop-down list appears when not hovered directly on button. newbie in css editing here. please me.

#container {    margin: 0px auto;    /*  		width: 1815px;  		height: 820px;  		*/    padding: 100px;  }  /*button style*/    .collegebtn {  width: 100px;    color: white;    display: block;    padding: 25px;    font-size: 30px;    border: none;    cursor: pointer;    background-color: transparent;    font-family: 'play', sans-serif;    box-shadow: 0 2px 4px 0 rgba(0, 181, 91, 0.74), 0 3px 10px 0 rgba(0, 181, 91, 0.74);  }  /*button effects*/    .collegebtn:hover {    background-color: #a10f31;    opacity: 0.6;  }  /*position <div> content*/    .listdrop {  width: 100px;    position: relative;    display: block;    margin-right: 40px;    margin-bottom: 40px;  }  /*the hidden list*/    .listdrop-title {    display: none;    position: absolute;    background-color: #ffffcc;    max-width: inherit;    text-align: center;    z-index: 1;  }  /*the links in dropdown*/    .listdrop-title {    color: black;    padding: 10px 12px;    display: block;    text-decoration: none;    font-family: 'century gothic';  }  /*bgcolor effects of links in dropdown*/    .listdrop-title a:hover {    background-color: #f1f1f1;    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  }  /*this show in hovering titles*/    .listdrop:hover .listdrop-title {    display: inline;    text-align: center;  }  /*bgcolor changes on shown dropdown*/    .listdrop:hover .buttondrop {    background-color: #d1e0e0;  }
<body>    <ul style="list-style: none;">      <div id="container">        <p>welcome our collections</p>        <div class="listdrop">          <li>            <button class="collegebtn"><a>category title</a>            </button>          </li>          <div class="listdrop-title">            <a href="prodlist/softsol.html">software</a>            <a href="prodlist/hardsol.html">hardware</a>            <a href="prodlist/others.html">others</a>          </div>        </div>    </ul>    </div>  </body>

just remove button around tag. shouldn't nest these two!

so <button class="collegebtn"><a>category title</a></button> <a class="collegebtn">category title</a>

and don't forget href="http://whereever" <a>, cause otherwise won't correct pointer on hover. @ least href="#" should job.

update

i think problem solved here. thats minimalistic example :) https://stackoverflow.com/a/19396291/1841828


Comments

Post a Comment

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

-
so when requesting group sequelize follows: return models.workingcalendar .findall({ attributes: [ 'workingcalendar.periodid', 'workingcalendar.date', 'period.name' ], include: [ { model: models.period, attributes: [] } ], where: { getsudoid: currentgetsudo.id, unitplantid: unitplantid }, group: ['workingcalendar.periodid', 'workingcalendar.date', 'period.name'], }); sequelize run query: select [workingcalendar].[id], [workingcalendar].[periodid], [workingcalendar].[date], [period].[name] [workingcalendars] [workingcalendar] left outer join [periods] [period] on [wor...
Read more

java - Android raising EPERM (Operation not permitted) when attempting to send UDP packet after network connection -

-
when responding supplicant_state_changed_action broadcast , attempting send udp packet, exception: java.net.socketexception: sendto failed: eperm (operation not permitted) @ libcore.io.iobridge.maybethrowaftersendto(iobridge.java:542) @ libcore.io.iobridge.sendto(iobridge.java:511) @ java.net.plaindatagramsocketimpl.send(plaindatagramsocketimpl.java:184) @ java.net.datagramsocket.send(datagramsocket.java:305) @ com.mycompany.app.serviceclass.discover(serviceclass.java:355)at com.mycompany.app.serviceclass.access$600(serviceclass.java:39) @ com.mycompany.app.serviceclass$statemachine.run(serviceclass.java:242) @ java.lang.thread.run(thread.java:818) caused by: android.system.errnoexception: sendto failed: eperm (operation not permitted) @ libcore.io.posix.sendtobytes(native method) @ libcore.io.posix.sendto(posix.java:211) @ libcore.io.blockguardos.sendto(blockguardos.java:278) @ libcore.io.iobridge.sendto(iobridge.java:509) @ java.net.plaindat...
Read more

c++ - Migration from QScriptEngine to QJSEngine -

-
i'm migrating qscriptengine code on qjsengine. now, have: class pars { public: static qscriptvalue printmainlog(qscriptcontext* c, qscriptengine* e); }; qscriptvalue pars::printmainlog(qscriptcontext* c, qscriptengine* e) { //some actions return e->globalobject().property(""); } ... qscriptengine engine; ... engine.globalobject().setproperty("printlog",engine.newfunction(pars::printmainlog)); so, user can put printlog("what ever"); in application in , example, qlineedit , function pars::printmainlog evalute. is there way qjsengine? so, user put same printlog("what ever");? way find here , user should put logger.printlog("what ever"); logger class inherited qobject printlog slot.
Read more